<!DOCTYPE>
<html>
<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title> cpchat </title>
  <link rel="stylesheet" type="text/css" href="{$data['pub']}/css/base.css" />
  <script type="text/javascript" src="{$data['pub']}/chat/js/jStore/jquery142.min.js"></script>
  <script type="text/javascript" src="{$data['pub']}/chat/js/jStore/jquery.jstore-all.js"></script>
  <script type="text/javascript" src="{$data['pub']}/chat/js/chat2.js"></script>
  <script src="http://{$data['ip']}:{$data['port']}/socket.io/socket.io.js"></script>
  <script type="text/javascript">  
  jQuery.extend(jQuery.jStore.defaults, {
    project: 'chat',
    engine: 'flash',
    flash: '{$data["pub"]}/chat/js/jstore/jStore.Flash.html'
  });  
  </script>
  <style type="text/css">
    .aui_content{padding:0;}
  </style>
 </head>
 <body>
 <script type="text/javascript">
  var socket = io.connect("http://{$data['ip']}:{$data['port']}");
  socket.on('connect', function () {
    socket.emit('chat', {'name':'{$uid}', 'nickname':'游客——'+{$ip}, 'group':{$group}});
    socket.on('ready', function () {
      $('#chat_banner').html("系统提示：欢迎来到{$title[$group]['title']}");
      $('#gonggao').html("{$title[$group]['gonggao']}");
    });
    socket.on('usermsg', function (data) {
      var d = data.split('@@|||@@');
      if(d[2] == 'private') {
        privatemsg(d[3]);
				if(typeof window.parent['{$group}_{$uid}_'+d[3]] == 'function'){
					window.parent['{$group}_{$uid}_'+d[3]](d[0]+' '+timeFormat(), d[1], 'blue');
				}
				
      }else{
        log(d[0]+' '+timeFormat(), d[1], 'blue');
				addChatLog({$group}, new Date().getTime(), d[0], d[1]);
      }
      
    });
    socket.on('chatlog', function (data) {
      var _chatLog = {};
      for(var i in data.data){
        var info = data.data[i].split('-|||-');
        _chatLog[info[0]+'-|||-'+info[1]] = info[2];
      }
      pageShow(data.group, data.oPage, _chatLog, data.p, data.limit, 'showServerLog');
    });
    
    socket.on('list', function (data) {
      var html = [];
      html.push('<ul>');
      for(var i in data){
        if(data[i] == null){
          continue;
        }
        if(data[i]['key'] == '{$uid}'){
          html.push('<li key="'+data[i]['key']+'"><font color="green">'+data[i]['name']+'</font></li>');
        }else{
          html.push('<li key="'+data[i]['key']+'">'+data[i]['name']+'</li>');
        }
      }
      html.push('<ul>');
      $('#f-list').html(html.join(''));
    });
  });
  
  function showServerLog(group, limit, p){
    socket.emit('getChatLog', {'group':group, 'limit':limit, 'p':p});
    
  }
  function sendToSer(){
    var sendTo = $('#send-to').val();
    var text = htmlEnCode($('#send-content').val());
    if(text == ''){
      alert('消息不能为空');
      return false;
    }
    if(sendTo == ''){
        socket.emit('publicmsg',text);
    }else{
        socket.emit('privatemsg',{'sendTo':sendTo,'text':text});
    }
    log('游客——{$ip}　'+timeFormat(), text, 'green'); 
    $('#send-content').val('');
    
    //本地存储
    addChatLog({$group}, new Date().getTime(), '游客——{$ip}', text);
    //同步服务器
    socket.emit('setChatLog',{'group':{$group}, 'name':'游客——{$ip}', 'time':new Date().getTime(), 'data':text});
  }
    
  function closeChat(group) {
    //关闭弹框
    socket.emit('close');
		//关闭所有子窗口
		if(typeof window.parent[group] != 'undefined')
		for(var i in window.parent[group]){
			window.parent[group][i].close();
		}
    window.parent['dia'+group].close();
		
  }  
  
  $('#f-list').live("click", function(e){
    if(e.button == 2){
      alert('右键');
    }else{
      $(this).find("li").css('background', '');
			if(e.target.nodeName == 'LI'){
				$(e.target).css('background', '#ccc');
			}
    }
  });
  var uDia = {};
  $('#f-list li').live("dblclick", function(e){   
    var key = $(this).attr('key');
    privatemsg(key);
  });
  function getSocket(){
    return socket;
  }
  function privatemsg(key){
    
    if(key == '{$uid}'){
      alert('禁止骚康式自聊');
    }else{
			if(typeof window.parent[{$group}] == 'undefined'){
				window.parent[{$group}] = {};
			}
			if(typeof window.parent[{$group}]['{$uid}_'+key] == 'undefined'){
				window.parent['{$uid}_socket'] = socket;
				window.parent[{$group}]['{$uid}_'+key] = window.parent['diaT'].dialog({id:'{$uid}_'.key, title:'来自{$title[$group]['title']} 的聊天', content:'', padding:''});
				window.parent[{$group}]['{$uid}_'+key].content("<iframe width='500' id='chatFrame' height='470' frameBorder=0 scrolling=no  id='chatFrame' src='<?php echo url('chat/index/pchat');?>&nickname=游客——{$ip}&key={$uid}&key2="+key+"&group={$group}'></frame>");      
			}else{
				window.parent[{$group}]['{$uid}_'+key].show();
			}
    }
  }
  
  </script>
 <div class="w500 auto bg_eee  left border">
  <div class=" bg_fff h300 " id="">
    <div id="chat_banner" class="h10 p5"></div>
    <div id="chatbox" class="h260 p5" style="overflow-y:scroll;">
    
    </div>
  </div>
<div class=" bg_ccc mt6 h30 tar">
<a href="javascript:;" class="button" onclick='showLog({$group}, 60)'>聊天记录</a>
</div>
<div class=" bg_fff mt6 h90">
<textarea class="w500" rows="3" onkeyup="var e = event ? event :(window.event ? window.event : null);if(e.keyCode==13){ sendToSer()} " id="send-content"></textarea>
</div>
<input type="hidden" id="send-to" value=""/>
<div class="btn tar"><a href="javascript:;" class="button" onclick='sendToSer()'>发送消息</a> <a href="javascript:;" onclick="closeChat({$group});" class="button">关闭</a></div>
</div>
<div id="right-list" class="auto right" style="width:197px;">
  <div class=" mt2 bg_eee h20">公告</div>
  <div id="gonggao" class=" mt2 h200">    
  </div> 
  <div class=" mt2 bg_eee h20">成员</div>
  <div class="h230  " id="f-list" style="overflow-y:scroll;" >  
  </div>  
</div>
<div id="log-content"class="w390 auto right hide">
  <div class="bg_eee mt6 h30">
    <a href="javascript:;" class="button" onclick='showLocalLog({$group}, 60, 0)'>本地记录</a>
    <a href="javascript:;" class="button" onclick='showServerLog({$group}, 60, 0)'>漫游记录</a>
  </div>  
  <div class="h390 p5 bg_ddd" id="chatLog" style="overflow-y:scroll;" ></div> 
  <div class="bg_eee mt6 h30">
   <div id="chatPage" class="right p10"></div>
  </div>
</div>
 </body>
</html>